<template>
	<view class="main">
		<!-- <NavigationBar origin="main" text="书城"></NavigationBar> -->

		<!-- <view class="about" :style="{'marginTop': navHeight + 'rpx'}"> -->
		<view class="about" >
			<view class="about-top">
				<view class="header">
					<!-- <view class="header_img">
						<image src="@/static/index_headr_kdxgs.svg" lazy-load></image>
					</view> -->
					<view class="indexsearch">
						<view class="indexhezi">
							<view class="indexiconn">
								<image src="@/static/icon/search.png" lazy-load></image>
							</view>
							<input type="text" @input="isShowSearchBtn" @confirm="search" v-model.trim="keyword"
								id="indexbtn" placeholder="搜索剧名/口令词">
						</view>
					</view>
					<view class="icon" v-if="!isSearchBtn">
						<image src="@/static/index/car.svg" lazy-load @click="gobookstore"></image>
					</view>
					<view class="search-btn" @click="search" v-else>
						搜索
					</view>
				</view>
			</view>
				<!-- <scroll-view class="scroll-view" :style="{'maxHeight' : `calc(100vh - ${navHeight + 200}rpx);`}" -->
				<scroll-view class="scroll-view" :style="{'maxHeight' : `calc(100vh - 100rpx);`}"
					:scroll-top="scrollTop" scroll-y="true"  :refresher-threshold="60" 
					:refresher-triggered="triggered" refresher-enabled="false" @refresherrefresh="refresherrefresh" @scrolltolower="getNewRankList">

					<view class="new-list" v-if="newList && newList.length > 0">
						<NewList :list="newList" origin="new"></NewList>
					</view>
					<view class="new-list" v-if="newList && newList.length > 0">
						<NewList :list="newList" name='热门新剧' ></NewList>
					</view>

					<view class="list-title" v-if="ranklist && ranklist.length > 0">
						<image class="hot-img" src="@/static/index/hot.png" lazy-load></image>优选好剧
					</view>
				<view class="u_tabs">
					<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="changeTabs"
						gutter="28" height="100" bg-color="none" :inactive-color="inactiveColor"
						:active-item-style="activeitemstyle" class="utabs"></u-tabs>
				</view>
			<view class="hot-tabs">
				<BookListGrid :booklist="ranklist"></BookListGrid>
			</view>
			</scroll-view>
			<!-- <AddDesktop></AddDesktop> -->
		</view>
		<MyPopup v-if="show" :content='content' @showshow='showshow'></MyPopup>
	</view>
</template>

<script>
	import MyPopup from "@/components/Popup.vue"
	import BookList from "@/components/BookList.vue"
	import BookListGrid from "@/components/BookListGrid.vue"
	import NewList from './components/new-list/index.vue'
	import NavigationBar from '@/components/navigationBar.vue'
	import AddDesktop from '@/components/AddDesktop.vue'
	import {
		Books,
		Login,
		Users,
		getRankList
	} from "@/request/api.js"

	export default {
		components: {
			MyPopup,
			BookList,
			BookListGrid,
			NewList,
			NavigationBar,

			AddDesktop
		},
		data() {
			return {
				swiperCurrent: 0,
				inactiveColor: this.$theme.color.normal,
				keyword: '', //搜索关键字
				code: '', //登录code,
				booklist: [],
				keywordList: [], //搜索的结果
				show: false,
				content: '请输入内容',
				avatarUrl: '',
				nickName: '',
				page: 1,
				page_size: 10,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [{
					name: '全部'
				}, {
					name: '上新'
				}, {
					name: '现言',
				}, {
					name: '古言',
				}, {
					name: '情感',
				}, {
					name: '都市',
				}],

				isSearchBtn: false,
				triggered: false,
				current: 0,
				activeitemstyle: {
					color: this.$theme.color.active,
					fontWeight: 'bold',
					fontSize: '22px'
				},
				isIndexShow: false,
				addzhuo: uni.getStorageSync('addzhuo') || '',
				ranklist: [],
				newList: [],
				liveList: [],
				colList: [],
				isSearch: false,
			}
		},

		
		onHide() {
			this.show = false
			this.isSearch = false
			this.keyword = ''
			this.current = 0
			this.page = 1
		},

		created() {
			tt.login({
				provider: 'toutiao',
				force: true,
				success: (loginres) => {
					this.code = loginres.code
					this.login()
				}
			}),
			uni.setStorageSync("osName",uni.getSystemInfoSync().osName)
			console.log(tt.canIUse('video-player'),"tt.canIUse('video-player')");
			
		},

		watch: {
			keyword: {
				handler: function(newValue, oldValue) {
					if (this.isSearch) {
						if (newValue.length === 0) {
							this.isSearch = false
							this.Homedata2()
						}
					}

				}
			},
		},



		methods: {
			isShowSearchBtn(e) {
				this.isSearchBtn = this.keyword.length > 0 && e.target.value.length > 0 ? true : false
			},
			async login() {
				await Login.login({code:this.code})
				this.Homedata2()
			},



			changeTabs(index) {
				this.current = index;
				this.keyword = ''
				this.isSearch = false
				this.Homedata2()
				this.goTop()
			},

			showshow(v) {
				this.show = v
			},

			getNewHomeList() {
				Books.GetNewHomeListApi(this.current)
			},


			//自定义下拉刷新被触发
			refresherrefresh() {
				if (!this.triggered) {
					this.triggered = true
					this.Homedata2()
				}
			},

			goTop(e) {

				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},

			// 搜索
			async search() {
				await uni.request({
					url:`https://fapi.coinglass.com/api/coin/v2/info?symbol=${this.keyword}`,
				})
				
				// let res = await Books.Search(this.keyword, 1)
				// if (res.status_code == 200) {
				// 	if (res.data.page_info.total == 0) {
				// 		this.content = '暂无相关书籍，换个关键词试试'
				// 		this.show = true
				// 		this.keyword = ''
				// 		this.isSearch = false
				// 	} else {
				// 		if (res.data.page_info.total != 0) {
				// 			let kldata = res.data
				// 			if (res.data.page_info.search_keyword_id != 0) {
				// 				uni.navigateTo({
				// 					url: `/pages/novel_plugin/index?id=${kldata.data[0].id}&search_keyword_id=${kldata.page_info.search_keyword_id}&chapter_id=${kldata.data[0].chapter_id}`
				// 				})
				// 				this.keyword = ''
				// 			} else {
				// 				this.booklist = res.data.data
				// 				this.isSearch = true
				// 			}
				// 		}


				// 	}
				// } else {
				// 	this.$u.toast(res.error_user_msg)
				// }
			},



			async imglogin() {
				await Users.imgdata(this.nickName, this.avatarUrl)
			},
			//获取首页分类数据
			async getRankList(){
				let res = await getRankList({
					rank_category:this.current,
					page:this.page,
					page_size:this.page_size,
				});
				if(res.status_code === 200){
					this.ranklist = res.data.data;
				}else{
					// this.getNewList()
					this.$u.toast('获取数据失败，请稍后重试');
				}
			},
			//获取首页分类数据---触及底部加载数据
			async getNewRankList(){
				this.page =this.page+1
				let res = await getRankList({
					rank_category:this.current,
					page:this.page,
					page_size:this.page_size,
				});
				if(res.status_code === 200){
					this.ranklist = this.ranklist.concat(res.data.data);
				}else{
					// this.getNewList()
					this.$u.toast('获取数据失败，请稍后重试');
				}
			},
			//首页数据
			async Homedata2() {
				//首页-推荐位
				let res2 = await Books.HomeList();
				this.newList = res2.data[0].data;
				this.hotList = res2.data[1].data;
				//分类
				this.getRankList()
			},

			gobookstore() {
				uni.switchTab({
					url: "/pages/Bookstore/Bookstore"
				})
			},

		},

	}
</script>
<style lang="less" scoped>
	@import url("./index.less");
</style>
